<template>
	<div>
		<van-field class="select" :required="required" readonly input-align="right"
		 clickable :fieldName="fieldName" :label="label" :value="selectValue" right-icon="arrow" placeholder="请选择" @click="showPicker = true" />
		<van-popup v-model="showPicker" round position="bottom">
			<van-picker show-toolbar :columns="fieldsList" @cancel="showPicker = false" @confirm="onConfirm" />
		</van-popup>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				showPicker: false,
				selectValue: '',
				selectId: '',
				fieldsList:[]
			}
		},
		created() {	
			this.initialize(this.dataList)
			this.setDefaultValue(this.fieldDefaultValue)		
		},
		mounted() {
			//初始化
			setTimeout(() => {
				this.$emit('selectClick',this.selectId)
			}, 10)			
		},
		props:['required','fieldName','label','dataList','fieldDefaultValue'],
		watch:{
			dataList:function(val){
				const list = val				
				this.initialize(list)
			}
		},
		methods:{
			initialize(list){ //初始化
				this.fieldsList = list.map(item => ({
					'text': item.name,
					'value': item.id,
					'sysBasicDataId': item.sysBasicDataId,
					'ef1': item.ef1
				}))	
			},
			setDefaultValue(val){
				this.selectId = val
				this.fieldsList.forEach(item => {
					if (item.value == this.selectId) {
						this.selectValue = item.text
					}
				})
			},
			onConfirm(value) {
				this.selectValue = value.text
				this.selectId = value.value
				this.showPicker = false
				this.$emit('selectClick',this.selectId)				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.select {
		/deep/ .van-field__label {
			width: 7.2em;
		}
	
		/deep/ .van-cell__value {
			/deep/ .van-field__control {
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}
</style>
